<template>
  <div>
    <el-drawer
      :visible.sync="modifyVisibility"
      size="88%"
      direction="ttb"
      :with-header="false"
    >
      <el-form
        ref="outStockBill"
        :model="outStockBill"
        :rules="rules"
        label-width="auto"
        size="mini"
        inline
      >
        <el-divider>BILL-SUMMARY</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="outStockCode" label="outStockCode：">
              <span v-text="outStockBill.outStockCode"> </span>
            </el-form-item>
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="storeHouse" label="storeHouse：">
              <el-input v-model.trim="outStockBill.storeHouse"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="outStockTime" label="outStockTime：">
              <el-date-picker v-model.trim="outStockBill.outStockTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="applier" label="applier：">
              <el-input v-model.trim="outStockBill.applier"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="department：">
              <el-select v-model="outStockBill.applyDepartment">
                <el-option
                  v-for="e in this.$store.state.departments"
                  :key="e.index"
                  :value="e.value"
                  :label="e.text"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>MATERIAL-DETAIL</el-divider>

        <div class="space-flex">
          <el-button type="primary" size="mini" @click="delDetail"
            >删除</el-button
          >
          <el-button type="primary" size="mini" @click="addDetail"
            >添加</el-button
          >
        </div>

        <el-table
          ref="outStockMaterialDetails"
          :data="outStockBill.outStockMaterialDetails"
          max-height="300px"
          border
          show-summary
          :summary-method="summaryMethod"
          @selection-change="selectionChange"
        >
          <!--         {
"materialCode": "MM20220223802600008",
"materialName": "万向轮",
"unit": "枚",
"quantity": 3,
"unitPrice": 100,
"amount": 300,

"outStockMaterialDetailId": {
"detailNo": 1
}
},   -->
          <el-table-column
            type="index"
            align="center"
            label="--"
          ></el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>

          <el-table-column align="left" width="256" label="品名">
            <template #default="{ row }">
              <el-link type="success" icon="el-icon-s-goods">{{
                row.materialCode
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column align="center" label="品名" prop="materialName">
          </el-table-column>
          <el-table-column align="center" label="单位" prop="unit">
          </el-table-column>
          <el-table-column sortable width="150" prop="unitPrice" label="单价">
            <template #default="{ row }">
              <el-form-item>
                <el-input-number
                  precision="2"
                  type="number"
                  size="mini"
                  v-model="row.unitPrice"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column sortable width="150" prop="quantity" label="数量">
            <template #default="{ row }">
              <el-form-item>
                <el-input-number
                  precision="0"
                  type="number"
                  size="mini"
                  v-model="row.quantity"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计价" prop="amount">
            <template #default="{ row }">
              <span> {{ amountC(row) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-divider>OPERATOR-SIGN</el-divider>

        <el-descriptions border>
          <el-descriptions-item label="申请人">
            <el-tag>{{
              $store.state.userInfo.username || "匿名用户"
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="审核人"></el-descriptions-item>
        </el-descriptions>

        <div class="space-flex">
          <el-button type="warning" icon="el-icon-remove" @click="reset"
            >重置
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="outStockBillSubmit"
            >提交
          </el-button>
        </div>
      </el-form>
      <out-stock-refer-material
        ref="outStockReferMaterial"
        @post-supported="postSupported"
      ></out-stock-refer-material>
    </el-drawer>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 * {
  "outStockCode": "OS20220223438100009",
  "totalAmount": 500420,
  "abandoned": false,
  "version": 0,
  "storeHouse": "北仓11-10",
  "applyDepartment": "tech",
  "applier": "zhangsan",
  "comment": "请提前准备齐全",
  "outStockTime": "2022-02-23T06:57:59.583",
  "billOperator": "anonymousUser",
  "operateState": "notSubmit",
  "billAuditor": null,
  "auditState": "NA",
  "outStockMaterialDetails": [
    {
      "materialCode": "MM20220223802600008",
      "materialName": "万向轮",
      "unit": "枚",
      "quantity": 3,
      "unitPrice": 100,
      "amount": 300,
      "outStockMaterialDetailId": {
        "detailNo": 1
      }
    },
    {
      "materialCode": "MM20220223648500009",
      "materialName": "液相色谱仪",
      "unit": "台",
      "quantity": 1,
      "unitPrice": 500000,
      "amount": 500000,
      "outStockMaterialDetailId": {
        "detailNo": 2
      }
    },
    {
      "materialCode": "MM20220223408100006",
      "materialName": "打印纸A4",
      "unit": "盒",
      "quantity": 1,
      "unitPrice": 120,
      "amount": 120,
      "outStockMaterialDetailId": {
        "detailNo": 3
      }
    }
  ]
}
 * 修改过程单据状态不发生变化 只有处于未提交状态可以修改
 *
 *   {
      "materialCode": "MM20220223408100006",
      "materialName": "打印纸A4",
      "unit": "盒",
      "quantity": 1,
      "unitPrice": 120,
      "amount": 120,
      "outStockMaterialDetailId": {
        "detailNo": 3
      }
      可以增删改 其中修改数据是数量和单价
 */
import fa from "element-ui/src/locale/lang/fa";
import OutStockReferMaterial from "@/components/erp/OutStockReferMaterial";

// import New from './components/New.vue';
export default {
  name: "OutStockModify",
  components: {
    OutStockReferMaterial,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      modifyVisibility: false,
      outStockBill: {
        /*可以修改的数据*/
        storeHouse: "北仓11-10",
        applier: "zhangsan",
        applyDepartment: "tech",
        outStockTime: "2022-02-23T06:57:59.583",
        comment: "请提前准备齐全",
        /*不能修改的数据*/
        billOperator: "anonymousUser",
        operateState: "notSubmit",
        billAuditor: null,
        auditState: "NA",
        outStockCode: "OS20220223438100009",
        totalAmount: 500420,
        abandoned: false,
        version: 0,
        outStockMaterialDetails: [],
      },
      selectedDetails: [],
      rules: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    amountC() {
      return function (row) {
        row.amount = row.unitPrice * row.quantity;
        return row.amount;
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},

    appear() {
      this.modifyVisibility = !this.modifyVisibility;
    },
    addDetail() {
      this.$refs.outStockReferMaterial.appear();
    },
    delDetail() {
      let t = this.outStockBill.outStockMaterialDetails.filter((x) => {
        let p = this.selectedDetails.find((y) => {
          return (
            y.outStockMaterialDetailId.detailNo ===
            x.outStockMaterialDetailId.detailNo
          );
        });
        return !p;
      });

      this.outStockBill.outStockMaterialDetails = t;
    },

    postSupported(supported) {
      let detail = supported.map((x) => {
        return {
          //自然流水号No 1 2 3
          outStockMaterialDetailId: {
            detailNo: Math.floor(Math.random() * 100),
          },
          //编号
          materialCode: x.materialCode,
          //冗余字段名称 价格可以以参考价格为初始值
          materialName: x.description,
          unit: x.chargeUnit,

          //手动调整和填写
          unitPrice: x.referPrice,
          quantity: 1,

          //计算属性
          amount: 0,
        };
      });
      this.outStockBill.outStockMaterialDetails.push(...detail);
    },

    summaryMethod({ columns, data }) {
      //column对象是 el-table-column代表的元信息列 如prop属性property 如align left 等
      //columns 为 List<column>
      //detailsData 为 form内嵌table 中table绑定的data 其中元素依然建议用row的概念表示 理解好 row[column.property]
      const sums = [];
      // console.log(" ---- "+columns.length)
      columns.forEach((column, index) => {
        //index 从0开始到n 以此循环 是行数
        const values = data.map((row) => Number(row[column.property]));
        /**
         *
         * 一般范式 最后一列作为统计列*/
        // console.log(columns.length - 1);
        if (index === columns.length - 1) {
          sums[index] = values.reduce((a0, ai) => {
            if (!isNaN(ai)) {
              return a0 + ai;
            } else {
              //如果不是数字 就略过
              return a0 + 0;
            }
          });
        }
        //
        if (index === 0) {
          sums[index] = "小";
        }
        if (index === 1) {
          sums[index] = "计";
        }
      });
      return sums;
    },
    selectionChange(selected) {
      this.selectedDetails = selected;
    },
    formatReq(outStockBill) {
      let d = outStockBill.outStockMaterialDetails;
      for (let i = 0; i < d.length; i++) {
        d[i].outStockMaterialDetailId.detailNo = i + 1;
      }
    },
    outStockBillSubmit() {
      this.$refs.outStockBill.validate((valid) => {
        if (valid) {
          this.formatReq(this.outStockBill);
          this.$http({
            method: "put",
            url: "http://127.0.0.1:9092/erp/outStock/modify",
            data: this.outStockBill,
          }).then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
            },
            (error) => {
              console.log(
                ".outStockBill request error : " + error.response.status
              );
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 66%;
  padding-left: 300px;
}
.el-table {
  ::v-deep .el-form-item {
    margin-bottom: 0;

    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.el-table {
  ::v-deep .el-table__cell {
    padding: 4px 0;
  }
}
.el-divider {
  margin: 8px 0;
}
.space-flex {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
</style>
